<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点是否在多边形内</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">

    <style>
        html,
        body,
        #container {
            height: 100%
        }
    </style>
</head>

<body>
    <div class='info'>人口迁徙</div>
    <div id="main" style="height:100%;width: 100%;">
    </div>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=200a45d053a0212a4d36141897d47155"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script src="js/echarts-amap.min.js" charset="UTF-8"></script>
    <script src="js/app.js"></script>
    <script type="text/javascript">
        // 初始化地图对象，加载地图
        var map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 13
        });

        $(function () {
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                amap: {
                    maxPitch: 60,
                    pitch: 10, //45 俯仰角
                    viewMode: '3D',
                    zoom: 13,
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [110, 33], //中心点
                    rotation: 0,  //顺时针旋转角度
                    resizeEnable: true,
                },
                animation: false,
                series: []
            });

            //上面的部分是echarts的配置，需要注意的是amap，这里的配置就是针对 高德地图 的配置了，而支持哪些配置
            //可以去高德地图的开发平台去查看

            var map = myChart.getModel().getComponent('amap').getAMap();
            var layer = myChart.getModel().getComponent('amap').getLayer();

            $.ajax({
                url: "json/data.json",    //请求的url地址
                dataType: "json",   //返回格式为json
                type: "GET",   //请求方式
                beforeSend: function () {
                    //请求前的处理
                },
                success: function (req) {
                    //请求成功时处理
                    var sku = req.data.index_data.analysis.area_data;


                    // 创建多边形
                    var path = [
                        [112.937188, 28.240666],
                        [112.940804, 28.240694],
                        [112.940836, 28.238067],
                        [112.937242, 28.23818],
                    ];

                    var path2 = [
                        [112.988128, 28.11035],
                        [112.990306, 28.110539],
                        [112.990478, 28.108523],
                        [112.988203, 28.108561],
                    ];



                    var iuy = getCenterPoint(path);
                    var iuy1 = getCenterPoint(path2);
                    console.info(iuy)
                    compute(path, sku, "一号", map)

                    compute(path2, sku, "二号", map)


                    map.setFitView();

                },
                complete: function () {
                    //请求完成的处理
                },
                error: function () {
                    //请求出错处理
                }
            });
            var series = [
                {//移动光标
                    "coordinateSystem": "amap",
                    "type": "lines",
                    "zlevel": 0.5,
                    "effect": {
                        "show": true,
                        "period": 5,//光标移动速度越小越快
                        "trailLength": 0.7,
                        "color": "Magenta",//光标颜色
                        "symbolSize": 6
                    },
                    "lineStyle": {
                        "normal": {
                            "color": "#a6c84c",
                            "width": 0,
                            "curveness": 0.2
                        }
                    },
                    "data": [
                        {
                            "coords": [
                                [//起点
                                    112.93859, 28.228788
                                ],
                                [//终点
                                    112.9390175, 28.23940175
                                ]
                            ],
                            "value": 95
                        },
                        {
                            "coords": [
                                [
                                    112.93859, 28.228788
                                ],
                                [
                                    112.98927875, 28.10949325
                                ]
                            ],
                            "value": 95
                        }
                    ]
                },
                {
                    "coordinateSystem": "amap",
                    "type": "lines",
                    "zlevel": 10,
                    "symbol": [
                        "none",
                        "arrow"
                    ],
                    "symbolSize": 20,
                    "lineStyle": {
                        "normal": {
                            "color": "#a6c84c",
                            "width": 4,
                            "opacity": 0.6,
                            "curveness": 0.2
                        }
                    },
                    "data": [
                        {
                            "coords": [
                                [
                                    112.93859, 28.228788
                                ],
                                [
                                    112.9390175, 28.23940175
                                ]
                            ],
                            "value": 95
                        },
                        {
                            "coords": [
                                [
                                    112.93859, 28.228788
                                ],
                                [
                                    112.98927875, 28.10949325
                                ]
                            ],
                            "value": 95
                        }
                    ]
                },
                {
                    "type": "effectScatter",
                    "coordinateSystem": "amap",
                    "zlevel": 6,
                    "rippleEffect": {
                        "brushType": "stroke"
                    },
                    "label": {
                        "normal": {
                            "show": true,
                            "position": "bottom",
                            "formatter": "{b}"
                        }
                    },
                    "itemStyle": {
                        "normal": {
                            "color": "#DC143C",
                        },
                    },
                    "data": [
                        {
                            "value": [
                                112.9390175, 28.23940175
                            ]
                        },
                        {
                            "value": [
                                112.98927875, 28.10949325
                            ]
                        },

                    ]
                }
            ];

            myChart.setOption({
                series: series
            });

            //下面是确保高德地图渲染的时候，echarts同时也需要再次渲染一次，保持位置的同步
            layer.render = function () {
                // let series = myChart.getOption().seriesIndexes;
                // myChart.setOption({
                //     series: []
                // });
                myChart.setOption({
                    series: series
                });

                console.log('当前缩放级别：' + map.getZoom());
                console.log('俯视视角：' + map.getPitch());
                console.log('顺时针：' + map.getRotation());
            }
        });

    </script>
</body>

</html>